<template>
  <div class="widget">
    <div class="widget-item">
      <p class="widget-title">标题</p>
      <el-input type="text" class="val" size="mini" v-model="formData.title" />
    </div>
    <div class="widget-item">
      <p class="widget-title-big">设置参考点1</p>
      <br />
    </div>
    <div class="widget-item">
      <p class="widget-title">经度</p>
      <el-input type="text" class="val" size="mini" v-model="formData.p1.lon" />
    </div>
    <div class="widget-item">
      <p class="widget-title">纬度</p>
      <el-input type="text" class="val" size="mini" v-model="formData.p1.lat" />
    </div>
    <div class="widget-item">
      <p class="widget-title-big">设置参考点2</p>
      <br />
    </div>
    <div class="widget-item">
      <p class="widget-title">经度</p>
      <el-input type="text" class="val" size="mini" v-model="formData.p2.lon" />
    </div>
    <div class="widget-item">
      <p class="widget-title">纬度</p>
      <el-input type="text" class="val" size="mini" v-model="formData.p2.lat" />
    </div>
    <div class="widget-item">
      <p class="widget-title-big">设置参考点3</p>
      <br />
    </div>
    <div class="widget-item">
      <p class="widget-title">经度</p>
      <el-input type="text" class="val" size="mini" v-model="formData.p3.lon" />
    </div>
    <div class="widget-item">
      <p class="widget-title">纬度</p>
      <el-input type="text" class="val" size="mini" v-model="formData.p3.lat" />
    </div>
    <div class="widget-item">
      <p class="widget-title-big">设置参考点4</p>
      <br />
    </div>
    <div class="widget-item">
      <p class="widget-title">经度</p>
      <el-input type="text" class="val" size="mini" v-model="formData.p4.lon" />
    </div>
    <div class="widget-item">
      <p class="widget-title">纬度</p>
      <el-input type="text" class="val" size="mini" v-model="formData.p4.lat" />
    </div>
    <el-dialog title=" " :visible.sync="showEditor" class="black-dialog">
      <div v-if="!previousRes">
        <el-input type="text" class="dialog-val" :rows="10" v-for="(e, i) in valLis" :key="i" v-model="e.val">
          <el-button slot="append" icon="el-icon-delete" @click="delValLis(i)" />
        </el-input>
        <el-button class="dialog-add none-type" @click="addValLis">添加</el-button>
      </div>
      <div v-else>
        <div v-for="(e, i) in previousRes" :key="i" class="dialog-val">
          <el-checkbox v-model="e.model" @change="handlePreviousResItem(i)">
            {{ e.val }}
          </el-checkbox>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitReject">确认</el-button>
        <el-button class="none-type" @click="showEditor = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import DagGraph from "@/views/dag/dagEdit/graph";
// let graph = null;

export default {
  props: {},
  data() {
    return {
      content: {},
      dagStructure: {},
      formData: {
        p1: {},
        p2: {},
        p3: {},
        p4: {}
      },
      defaultValue: '',
      title: '',
      params: '',
      showEditor: false,
      valLis: [],
      previousRes: null
    };
  },
  methods: {
    commitData() {
      this.defaultValue = JSON.stringify(this.formData)
      this.content.defaultValue = this.defaultValue
      this.$EventBus.$emit('defaultValue', this.content)
    },
    emitData() {
      this.$EventBus.$emit('defaultValue1', JSON.stringify(this.formData))
    },
    showDialog() {
      this.showEditor = true
      this.valLis = this.params ? this.params.split(',').map(e => {
        return {
          val: e
        }
      }) : [{ val: '' }]
    },
    delValLis(i) {
      this.valLis.splice(i, 1);
    },
    addValLis() {
      this.valLis.push({ val: '' })
    },
    submitReject() {
      if (this.previousRes) {
        let temp = this.previousRes.map(e => e.model && e.val).filter(e => e)
        console.log(temp)
        this.params = temp.join(',')
      } else {
        let temp = this.valLis.map(e => e.val).filter(e => e)
        this.params = temp.join(',')
      }
      this.showEditor = false
    },
    handlePreviousResItem(i) {
      console.log(i)
    },
    handlePreviousRes() {
      if (!this.content.component_id) return
      let prev = this.dagStructure[this.content.component_id]
      if (prev) {
        let tempText = prev.result.stream[0].text
        let tempTable = tempText.replace('[', '').replace(']', '').split('\n')
        this.previousRes = tempTable[0].trim().split('  ').map(e => {
          return {
            val: e,
            model: this.params.indexOf(e) != -1
          }
        })
      }
    }
  },
  mounted() {
    console.log("mounted--------------------------")
    this.defaultValue = this.content.defaultValue
    if (this.defaultValue) {
      let formData = JSON.parse(this.defaultValue)
      if (!formData.p1) {
        formData.p1 = {}
        formData.p2 = {}
        formData.p3 = {}
        formData.p4 = {}
      }
      this.formData = formData
    }
    // if (DagGraph["graph"]) {
    //   graph = DagGraph["graph"];
    // }
  },
  updated() {
    console.log('updated')
    this.emitData()
  },
  beforeDestroy() {
    console.log("beforeDestroy--------------------------")
    this.commitData()
  }
};
</script>

<style lang="less" scoped>
.val {
  width: 180px;
  line-height: 32px;
}

.dialog-val {
  margin: 10px 0;
}
</style>
